<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2.menu <<=- 1.idle</title>
<link href="../hc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../hc.js"></script>
<script type="text/javascript" src="../idle.js"></script>
<script type="text/javascript" src="../menu.js"></script>
<style type="text/css" title="">
html
{
padding:0 !important;
padding:58px 0 36px 0;
}
#bar
{
position:absolute;
top:0;
left:0;
width:100%;
height:26px;
}
#cmd{
position:absolute;
top:26px;
left:0;
width:100%;
height:32px;
}
#mid
{
position:absolute;
top:58px;
left:0;
right:0;
bottom:36px;
width:100%;
height:auto !important;
height:100%;
overflow:auto;
}
#foot
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:36px;
}
#credits
{
margin:2px;
background:#fafaff;
}
.mnu
{
background:url("ui/bg2.gif") repeat-x;
}
.nav
{
border-top:solid 1px #f9f9f9;
border-bottom:solid 1px #cde;
background:#f9f9f9;
}
#subm
{
top:200px;
left:200px;
width:200px;
}
.btn2
{
background:url("ui/bg2.gif") no-repeat;
}
.dv
{
width:601px;
}
#uf{
display:block;
width:16px;
height:16px;
background:url("icos/idle7.gif") -80px 1px no-repeat;
float:left;
}

b{
font-size:10pt;
color:blue;
}
var{
color:red;
}
q{
color:purple;
}
i{
color:green;
}
</style>
</head>

<body>
<div id="bar">
</div>
<div id="cmd">
<ul class="nav">
	<li class="l"><span class="i"><img src="icos/45.png" class="ico" /><span class="t">file</span></span></li>
	<li class="zl">&nbsp;</li>
	<li class="l"><a href="#"><span class="t">new</span></a></li>
	<li class="l"><a href="#"><span class="t">edit</span></a></li>
	<li class="r"><a href="#"><span class="t">config</span><img src="icos/arr2.gif" class="d" style="padding:5px 0 0 3px;" /></a></li>
	<li class="zr">&nbsp;</li>
	<li class="r"><a href="#"><span class="t">settings</span></a></li>
</ul>
</div>
<div id="mid">
	<div style="height:800px;line-height:800px;background:#f9f9f9;">
		<div id="con" style="line-height:18px;">
<pre>
		var menuobj=new menu$ <b>( {</b>
			<var>id</var> <b>:</b> <q>menuid</q><i>/* if already has an element by this id, the id is set to the new Date() value. */</i><b>,</b>
			<var>elem</var> <b>:</b> <q>element</q><i>/* if elem is not given, the docment.body will take the place */</i><b>,</b>
			<var>menu</var> <b>: [ </b><i>/* the menu item Array */</i>
				<b>{</b>
					<var>cls</var> <b>: </b><q>className</q> <b>,</b>
					<var>css</var> <b>: </b><q>cssText</q> <b>,</b>
					<var>a</var> <b>: {</b>
						<var>id</var> <b>: </b> <q>element id</q>
					<b> } ,</b>
					<var>label</var> <b>: {</b>
						<var>txt</var> <b>: </b> <q>text</q>
					<b> } ,</b>
				<b>}
		] ,</b>
		<b>} ) ;</b>
</pre>
		</div>
<hr />
		<a class='btn' id='zz' href='#' onclick='return false;'><span class="t">delete</span></a>
	</div>
</div>
<div id="foot">
	<div id="credits">
		<span class="key">1</span>
		<span class="key">2</span>
		<span class="key">3</span>
	</div>
</div>
<script type="text/javascript">
//<![CDATA[
var mymnu=new menu$({id:'topmenu',elem:$('bar'),menu:[
	{id:'sysapp',cls:'l',css:'margin-left:3px;',a:{id:'hcg'},ico:{src:'/icos/bricks.png',alt:'system'},
		menu:[
			{txt:'sub1',fn:function(){alert('sub1');}},
			{txt:'-|-'},
			{txt:'sub2',fn:function(){alert('sub2');},
			menu:[
				{ico:'icos/45.png',txt:'sub21',fn:function(){alert('sub21');}},
				{txt:'-|-'},
				{txt:'sub22',fn:function(){alert('sub22');},
				menu:[
					{ico:'icos/45.png',txt:'sub31',fn:function(){alert('sub31');}},
					{txt:'-|-'},
					{txt:'sub32',fn:function(){alert('sub32');},
					menu:[
						{ico:'icos/45.png',txt:'sub41',fn:function(){alert('sub41');}},
						{txt:'-|-'},
						{txt:'sub42',fn:function(){alert('sub42');},
						menu:[
							{ico:'icos/45.png',txt:'sub51',fn:function(){alert('sub51');}},
							{txt:'-|-'},
							{txt:'sub52',fn:function(){alert('sub52');},
							menu:[
								{ico:'icos/45.png',txt:'sub61',fn:function(){alert('sub61');}},
								{txt:'-|-'},
								{txt:'sub62',fn:function(){alert('sub62');},
								menu:[
									{ico:'icos/45.png',txt:'sub71',fn:function(){alert('sub71');}},
									{txt:'-|-'},
									{txt:'sub72',fn:function(){alert('sub72');},
									menu:[
										{ico:'icos/45.png',txt:'sub81',fn:function(){alert('sub81');},
										menu:[
											{ico:'icos/45.png',txt:'sub91',fn:function(){alert('sub91');}},
											{txt:'-|-'},
											{txt:'sub92',fn:function(){alert('sub92');}}
										]},
										{txt:'-|-'},
										{txt:'sub82',fn:function(){alert('sub82');}}
									]}
								]}
							]}
						]}
					]}
				]}
			]}
		],fn:function(a){}},
	{label:{txt:'-|-'},cls:'zl'},
	{cls:'l',css:'',a:{id:'ghome'},ico:{src:'icos/45.png',alt:''},
		label:{txt:'home2'},key:'j',fn:function(){alert(this.id);}},
	{cls:'r',css:'margin-right:5px;',a:{id:'exit'},
		label:{txt:'exit',cls:'u f_c'},fn:function(){}},
	{cls:'r',a:{id:'help'},label:{txt:'help',cls:'u f_c'},fn:function(){alert('help system');}},
	{label:{txt:'-|-'},cls:'zr'},
	{cls:'r',a:{id:'acc',href:'idle.htm'},label:{txt:'account'},fn:function(){alert('account setting');}},
	{cls:'r',label:{id:'uf'},fn:function(){alert('user status');}}
	]});
mymnu.init$();
var myol=new idle$({token:'token',user:'hc',module:'module',mdlid:'9999',locref:'locref'},'',{idle:function(a){if(!isNaN(a))$('uf').style.backgroundPosition=16*(1-a) +'px 1px';},timeout:function(){top.location.reload();}});
myol.ini=setInterval('myol.init$();',1000);
/* $('zz').onclick=function(){if(hcol&&hcol.remove$){clearInterval(hcol.ini);hcol.remove$();}}; */
//]]>
</script>
</body>
</html>
